import { BetaSchemaForm } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ActionType } from "@ant-design/pro-table"
import { SysTheme } from "@sker/model"
import {  useForm, useModal, useModel } from "@sker/sdk"
import { renderAdminPage, Deving,useServerData } from "@sker/ui"
import { Button, Modal, Popconfirm, Switch } from "antd"
import { useRef, useState } from "react"

export const ThemePage: React.FC<{}> = ({ }) => {
    const model = useModel(SysTheme)
    const { props: addProps, setOpen: setAddOpen } = useModal('添加主题')
    const { props: settingProps, setOpen: setSettingOpen } = useModal('主题设置')
    const [record, setRecord] = useState<SysTheme>()
    const actionRef = useRef<ActionType>()
    const { props: formProps, form } = useForm([
        { title: '主题名', dataIndex: 'title' },
    ], async (values) => {
        const theme = new SysTheme()
        theme.title = values.title;
        theme.setting = {};
        theme.using = false;
        await model.create(theme)
        setAddOpen(false)
        actionRef.current?.reload();
    })
    const [serverData] = useServerData()
    return <PageContainer title={serverData?.title || '主题管理'} extra={<Button type={'primary'} onClick={e => setAddOpen(true)}>添加主题</Button>}>
        <Modal {...addProps}>
            <BetaSchemaForm {...formProps} />
        </Modal>
        <Modal {...settingProps}>
            <Deving/>
        </Modal>
        <ProTable
            search={false}
            toolBarRender={false}
            actionRef={actionRef}
            rowKey={record => record.id}
            columns={[
                { title: '主题名', dataIndex: 'title' },
                {
                    title: '使用', dataIndex: 'using', renderText(text, record, index, action) {
                        return <Switch checked={text} onChange={async e => {
                            const list = await model.findAll(['id'], []).then(res=>res.data)
                            await model.updateMany(list.map((it) => it.id), { using: false })
                            await model.update({ using: e }, record.id)
                            actionRef.current?.reload();
                        }} />
                    },
                },
                {
                    title: '操作', align: 'right', renderText(text, record, index, action) {
                        return <>
                            <Button size={'small'} type={'link'} onClick={e => {
                                setRecord(record)
                                setSettingOpen(true)
                            }}>设置</Button>
                            <Popconfirm onConfirm={async e => {
                                await model.delete(record.id)
                                await actionRef.current?.reload();
                            }} title={'此操作不可逆!您确定要执行此操作吗？'} description={'删除后无法恢复，请慎重操作！！'}>
                                <Button size={'small'} type={'link'} danger >删除</Button>
                            </Popconfirm>
                        </>
                    },
                }
            ]} request={async () => {
                return model.find(['id', 'title', 'using'],[], [{field: 'tid', order: 'desc'}])
            }}></ProTable>
    </PageContainer>
}

renderAdminPage(ThemePage, 'imeepos/core/web/theme')